import React, { Component } from 'react'
import Detail from './Detail'
import { Route,Link} from 'react-router-dom'

export default class Message extends Component {
  state = {
    messageArr:[
      {
        id:'01',title:'消息1'
      }, {
        id:'02',title:'消息2'
      }, {
        id:'03',title:'消息3'
      }
    ]
  }
    replaceShow = (id,title) => {
      //编写一段代码，让其实现跳转到Detail页面，且为replace跳转
      this.props.history.replace({pathname:'/home/message/detail',state:{id:id,title:title}})
    }
    pushShow = (id,title) => {
      //编写一段代码，让其实现跳转到Detail页面
      this.props.history.push({pathname:'/home/message/detail',state:{id:id,title:title}})
    }
    back = (id,title) => {
      this.props.history.goBack()
    }
    forward = (id,title) => {
      this.props.history.goForward()
    }
    go = (id,title) => {
      this.props.history.go(2)
    }
    render() {
      const { messageArr } = this.state
      console.log(this.props)
        return (
            <div>
                <ul>
                  {
                    messageArr.map((msgObj) => {
                      return(
                        <li key={msgObj.id}>
                          {/* 向路由组件传递params参数 */}
                          {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

                          {/* 向路由组件传递search参数 */}
                          {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

                          {/* 向路由组件传递state参数 */}
                          {/* Link默认push模式 ，可以添加replace属性改为replace模式 */}
                         <Link replace to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link> 
                        &nbsp;<button style={{display:'inline-block',float:'none'}} onClick={() => {
                          this.pushShow(msgObj.id,msgObj.title)
                        }}>push查看</button>
                        &nbsp;<button style={{display:'inline-block',float:'none'}} onClick={() => {
                          this.replaceShow(msgObj.id,msgObj.title)
                        }}>replace查看</button>

                        </li>
                      )
                      
                    })
                  }
                </ul>
                {/* 声明接收params （注意路径格式）*/}
                {/* <Route path="/home/message/detail/:id/:title" component={Detail}></Route> */}

                {/* search参数无需声明接收 ，正常注册即可*/}
                {/* <Route path="/home/message/detail/" component={Detail}></Route> */}

                {/* state参数无需声明接收 ，正常注册即可*/}
              <Route path="/home/message/detail/" component={Detail}></Route>
              &nbsp;<button style={{display:'inline-block',float:'none'}} onClick={() => {
                  this.back()
              }}>回退</button>
              &nbsp;<button style={{display:'inline-block',float:'none'}} onClick={() => {
                this.forward()
              }}>前进</button>
              &nbsp;<button style={{display:'inline-block',float:'none'}} onClick={() => {
                this.go()
              }}>go</button>
            </div>
        )
    }
}
